<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			.yi {
				padding: 10px 16px;
				background-color: #D4554E;
				display: inline-block;
				margin: 70px;
				border-radius: 5px;
				float: left;
				cursor: pointer;
			}
			
			.er {
				border: 1px solid #ccc;
				border-radius: 5px;
				width: 300px;
				height: 100px;
				float: left;
				font-family: 楷体;
				font-size: 24px;
				position: relative;
				top: 35px;
				left: -55px;
				display: none;
			}
			
			.er .sanj, .sanj1 {
				width: 0;
				height: 0;
				border-width: 10px;
				border-style: solid;
				border-color: transparent #CCC transparent transparent;
				border-radius: 5px;
				position: relative;
				top: 22px;
				left: -20px;
			}
			
			.er .sanj1 {
				border-color: transparent #fff transparent transparent;
				position: relative;
				top: 2px;
				left: -18px;
			}
		</style>
	</head>

	<body>
		<div class="yi">点我一下试试</div>
		<div class="er">
			我只能支撑<span id="jian">3</span>秒,你自己保重
			<div class="sanj"></div>
			<div class="sanj1"></div>
		</div>

		<script type="text/javascript">
			!function(window,document,undefined) {

				var app = document.getElementsByClassName('yi')[0];
				var show = document.getElementsByClassName('er')[0];
				
				app.onclick = function() {
					var mun = 3,
						jian = document.getElementById('jian');

					show.style.display = 'block';
					jian.innerHTML = 3;
					setTimeout(function() {
						show.style.display = 'none';
						clearInterval(di);
					},3000)
					var di = setInterval(function() {
						mun --
						jian.innerHTML = mun;
					},1000)

						
				}

			}(window,document)

		</script>

	</body>

</html>